<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				margin-left: 20px;
			}
			#soulDiv{
				height: 50px;
			}
			.interval{
				margin-top: 20px;	
			}
			#substyle{
				
				margin-left: 50px;
			}
		</style>
		<script type="text/javascript">
			
			// function can't be in anonymity function, the browser compiler can't search that.
			// 1. three way
			function see(){
				console.log("hello hell");
			}
			function sampleListenerClick(){
				document.getElementById("Click").addEventListener("click",see());
			}
			
			
			// 4. div move event
			var i = 0;
			function how(){
				document.getElementById("soulDiv").addEventListener("click",move());	
			}
			function move(){
				i = i + 20;
				document.getElementById("soulDiv").style.marginLeft = i + "px";
				console.log("let's move, soulDiv, now it move " + i + "px" );
			}
			function remove(){
				document.getElementById("soulDiv").removeEventListener("click",move);
				console.log("how to make sure it really remove? I know. remove move right bracket in how function, if remove, first time it will stuck.");
			}
			
			window.onload = function () {
				// 1. three way
				document.getElementById("individualClick").onclick = see;
				
				// 2. not three bind, I start one bind.
				document.getElementById("soulDiv").onmouseenter = function(){
					document.getElementById("soulDiv").style.width = '100px';
					document.getElementById("soulDiv").style.height = '100px';
					document.getElementById("soulDiv").style.backgroundColor = 'aqua';
				}
				
				// 3.check information if human make mistakes. 
				document.getElementById("username").value = "请输入用户名";
				document.getElementById("username").onfocus = function(){
					console.log("检测到用户正在输入");
				}
				document.getElementById("username").onblur = function(){
					if (document.getElementById("username").value.length == 0 || document.getElementById("username").value == "请输入用户名"){
						alert("用户名不能为空");
					}
				}
				
				document.getElementById("password").onfocus = function(){
					console.log("检测到用户正在输入机密");
				}
				document.getElementById("password").onblur = function(){
					if (document.getElementById("password").value.length < 6){
						alert("密码长度不能小于6位");
					}
				}
				
				document.getElementById("substyle").onclick = function(){
					if(document.getElementById("username").value.length < 8 || document.getElementById("password").value.length < 6){
						alert("用户名不能小于十八位，密码不能小于六位");
					}else if(document.getElementById("password").value.length == 0 ){
						alert("密码不能为空");
					}
				}
				
				
			}
			
			
			
		</script>
	</head>
	<body>
		<div id = "soulDiv" onclick="how()">
			
		</div>
		<button id="individualClick" type="button" onclick="see()">Click</button>
		<button id="Click" type="button" onclick="sampleListenerClick()">see</button>
		<button id="new" type="button" onclick="remove()">remove</button>
		<br />
		<br />
		用户名: <input class = "interval" type="text" name="" id="username" value="" /> <br/>
		密码: <input class = "interval" type="password" name="" id="password" value="" /> <br/>
		<button class = "interval" id = "substyle" type="submit">提交</button>
	</body>

</html>
